<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <style>
        body{
            padding:20px;
        }
        #f{
            position:relative;
            width:300px;
            height:500px;
            border:1px solid green;
            box-sizing: border-box;

            overflow: hidden;
        }

        #f > div{
            position:absolute;
            top:-1px;
            right:-300px;
            width:300px;
            height:500px;
            border:1px solid red;

            text-align:center;
            line-height:500px;
            font-size:20px;
            color:blueviolet;
            box-sizing: border-box;
            /* opacity:0; */


            border:1px solid green;
            transition-property: top,right,opacity;
            transition-duration: 1s;

        }
        #f:hover > div{
            top:0px;
            right:0px;
            opacity:1;

        }
    </style>
</head>

<body>
    <div id="f">
        <div>闫海静真英俊！</div>
    </div>
</body>

</html>